<template>

  <el-dialog title="现付账详细信息" :visible.sync="dialogVisible" append-to-body width="50%">
    <el-table :data="cashBillsList" border style="width: 100%;">
      <el-table-column prop="billNo" header-align="left" align="left" label="单据号" width="200" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="name" header-align="left" align="left" label="POS" width="100">
        <template slot-scope="scope">

          <el-tag type="warning"> {{scope.row.name}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="courseInfo" header-align="left" align="left" label="消费信息" width="200">
      </el-table-column>

      <!-- <el-table-column
        prop="projectId"
        header-align="center"
        align="center"
        label="地点Id">
      </el-table-column> -->
      <!-- <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="挂房账"
      >
        <template slot-scope="scope">
          <el-tag>{{scope.row.type==1?'是':'否'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="peopleName"
        header-align="center"
        align="center"
        label="挂账人"
      >
        <template slot-scope="scope">
          {{scope.row.type==1?scope.row.peopleName:''}}
        </template>
      </el-table-column> -->
      <el-table-column prop="consumeMoney" header-align="left" align="left" label="消费金额" width="150">
      </el-table-column>
      <el-table-column prop="payType" header-align="left" align="left" label="付款" width="150">
      </el-table-column>
      <el-table-column prop="note" header-align="left" align="left" label="备注" width="200">
      </el-table-column>
      <el-table-column prop="createTime" header-align="left" align="left" label="创建时间" width="200">
      </el-table-column>
      <!-- <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="修改时间">
      </el-table-column> -->
      <el-table-column prop="state" header-align="left" align="left" label="状态" width="200">
        <template slot-scope="scope">
          <el-tag :type="stateMap[scope.row.state]">
            {{scope.row.state==1?'已结账':'未结账'}}
          </el-tag>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[5,10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </el-dialog>

</template>

<script>
  import Moment from 'moment'
  export default {
    data() {
      return {
        cashBillsList: [],
        dialogVisible: false,
        pageIndex: 1,
        pageSize: 5,
        totalPage: 0,
        stateMap: ['danger', 'success'],
        startTime: '',
        endTime: ''
      }
    },
    methods: {
      init(startTime, endTime) {
        this.cashBillsList = []
        this.pageIndex = 1,
          this.pageSize = 5,
          this.totalPage = 0,
          this.dialogVisible = true
        this.pageIndex = 1;
        this.startTime = startTime
        this.endTime = endTime
        this.getCashBillsList(startTime, endTime)
      },
      getCashBillsList(startTime, endTime) {
        this.dialogVisible = true
        console.log("time", this.time)
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelcashbills/listByTimeRangeWithShiftWork'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            startTime: this.startTime,
            endTime: this.endTime
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.cashBillsList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.cashBillsList = []
            this.totalPage = 0
          }
        })
      },

      filterTime(row, column, cellValue, index) {
        return Moment(row.time).format('YYYY-MM-DD')
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getCashBillsList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getCashBillsList();
      },
    }
  }
</script>
